<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/index.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
</head>

<body>
    <!-- 透明度轮播图 -->
    <h3>透明度轮播图</h3>
    <div class="slide-container" id="slides">
        <ul class="clear slide-wrap">
            <li>
                <img src="img/t1.png" alt="">
            </li>
            <li>
                <img src="img/t2.png" alt="">
            </li>
            <li>
                <img src="img/t3.png" alt="">
            </li>
            <li>
                <img src="img/t4.png" alt="">
            </li>
            <li>
                <img src="img/t5.png" alt="">
            </li>
        </ul>
        <div class="prev btn">上一个</div>
        <div class="next btn">下一个</div>
        <div class="pagenation"></div>
    </div>
    <!-- 左右滑动轮播图 -->
    <h3>左右滑动轮播图</h3>
    <script src="js/index.js"></script>
    <script>
        var bannerSlide1 = new imgSlide({
            slideContainer: 'slides'
        })
    </script>
</body>

</html>